<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../dist/styles/jquery.carousel-3d.default.css">

  <!--<script src="http://localhost:35729/livereload.js"></script>-->
  <script src="../bower_components/jquery/jquery.js"></script>
  <script src="../bower_components/javascript-detect-element-resize/jquery.resize.js"></script>
  <script src="../bower_components/waitForImages/dist/jquery.waitforimages.js"></script>
  <script src="../bower_components/modernizr/modernizr.js"></script>
  <script src="../dist/jquery.carousel-3d.js"></script>

  <style>
    html, body {
      margin: 0px;
    }
    .wrapper {
      width: 100%;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div data-carousel-3d>
    <img src="./image/1.jpg" selected />
    <div style="min-width: 320px; min-height: 213px; max-width: 320px; max-height: 213px">
      <p style="background-color:black; color:white; margin:20px; padding:20px;">A simple html child</p>
      <div style="background-color:gray; color:white;">Html contents also works ok!!!</div>
      <div>The quick brown fox jumps over the lazy dog</div>
      <p>
        Make the fox
        <button type="button" onclick="alert('Jump!!');">jump</button>
      </p>
    </div>
    <img src="./image/3.jpg" />
    <img src="./image/4.jpg" />
    <img src="./image/5.jpg" />
    <img src="./image/6.jpg" />
  </div>
</div>
</body>
</html>
